<!-- 
 - Author : chenyliu.
 - Date   : 2016/9/18.
 - File   : steps.vue.
 -->

<template>
  <ul class="steps">
    <li v-for="(index, step) in allSteps"
            :class="{'active': index == currentStep,
              'complete': index < currentStep || step.isComplete}">
      <span class="circle">{{ index + 1 }}</span>
      <span class="title">{{ step.title }}</span>
    </li>
  </ul>
</template>

<script>
  export default {
    props: {
      allSteps: {
        type: Array,
        default: null
      },
      currentStep: {
        type: Number,
        default: 0
      }
    }
  }
</script>

<style lang="less">

  .steps {
    list-style: none;
    height: 45px;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #c6cdd8;
    -webkit-padding-start: 0px;
    li {
      display: inline-block;
      height: 45px;
      font-size: 16px;
      line-height: 40px;
      letter-spacing: 1.5px;
      margin-right: 50px;
      cursor: default;
      color: #8b98a6;
      .circle {
        display: inline-block;
        height: 24px;
        width: 24px;
        border-radius: 24px;
        background-color: #8B98A5;
        color: #fff;
        line-height: 24px;
        text-align: center;
      }
      .title {
        display: inline-block;
      }
      &.complete {
        border-bottom: none;
        .circle {
          text-indent: -999em;
          background: url("./icon_check_complete.png");
          background-size: 100%;
        }
        .title {
          color: #8b98a6;
        }
      }
      &.active {
        cursor: default;
        border-bottom: 2px solid #3FB1E9;
        .circle {
          background-color: #3FB1E9;
        }
        .title {
          color: #3FB1E9;
        }
      }
    }
  }

</style>